import React, { Component } from 'react';
import Platform from 'Platform';
import {
    View,
    Text,
    StyleSheet,
		TextInput,
    TouchableOpacity,
    Image,
    Alert,
} from 'react-native';
import md5 from 'react-native-md5';
import { login, resetLogin } from '../actions/login';
import { connect } from 'react-redux';
import Spinner from 'react-native-loading-spinner-overlay';
import Icon from 'react-native-vector-icons/FontAwesome';
import * as defaultStyles from '../constants/DefaultStyles';
import {Actions} from 'react-native-router-flux';



class LoginContainer extends Component {
  constructor(props) {
		super(props);
		this.state = {
      isLoading: false,
      loginBtnDisable: true,
      uname: '',
      pwd: '',
    };
	}

  shouldComponentUpdate(nextProps, nextState){
    if (nextProps.isLoginSuccess === true && nextProps.errorMessage === 'OK' 
    && nextProps.isLoading !== true) {
      this.props.dispatch(resetLogin());
      global.merid = nextProps.merid;
      global.uname = this.state.uname;
      global.speech = false;
      storage.save({
        key: 'merid',
        rawData: {
          uname: this.state.uname,
          merid: nextProps.merid,
          speech: false,
        },
        expires: null
      });
      Actions.tabbar({type: 'replace'});
    } 
    else if (nextProps.errorMessage !== 'OK' && nextProps.isLoading === false 
    && nextState.isLoading !== false) {
      if (!defaultStyles.isIOS) {

      }
      Alert.alert('提示', nextProps.errorMessage, [
        {text: 'OK', onPress:() => {this.setState({isLoading: false})}}
        ]);
    }
    else if(nextProps.errorMessage === 'OK' && nextProps.isLoading === true){
      this.state.isLoading = true;
    }
    return true;
  }
  _setUname(text) {
    this.state.uname = text;
    if (text.length > 0 && this.state.pwd.length > 0) {
      this.setState({
        loginBtnDisable: false,
      })
    }
    else {
      this.setState({
        loginBtnDisable: true,
      })
    }
  }
  _setPwd(text) {
    this.state.pwd = text;
    if (text.length > 0 && this.state.pwd.length > 0) {
      this.setState({
        loginBtnDisable: false,
      })
    }
    else {
      this.setState({
        loginBtnDisable: true,
      })
    }
  }
  render() {
    return (
      <View style={styles.view}> 
        <Spinner visible={this.state.isLoading} textContent="正在登录中，请稍候..."
                 textStyle={{color: 'white'}}  overlayColor={'rgba(0, 0, 0, 0.7)'}/>
        <View style={styles.textInputView}>
          <View style={styles.icon}><Icon name={'user-o'} size={25} color={'blue'}/></View>  
          <TextInput placeholder={'  商户号/手机号'} underlineColorAndroid={'transparent'}
          style={styles.textInput}
          onChangeText={(text) => this._setUname(text)} placeholderTextColor={'#D3D3D3'}/>
        </View>
				<View style={styles.textInputView}>
          <View style={styles.icon}><Icon name={'lock'} size={25} color={'blue'}/></View>
          <TextInput placeholder={'  输入密码'} underlineColorAndroid={'transparent'}
                     secureTextEntry={true} placeholderTextColor={'#D3D3D3'}
                     style={styles.textInput}
                     onChangeText={(text) => this._setPwd(text)}/>
        </View>
        <TouchableOpacity style={styles.loginBtn} disabled={this.state.loginBtnDisable}
                          onPress={() => this.props.dispatch(login(this.state.uname, this.state.pwd))}>
          <Text style={styles.btnTitle}>登录</Text>
        </TouchableOpacity>
        {/*<TouchableOpacity style={styles.forgetBtn}*/}
                          {/*onPress={() =>Actions.forget()}>*/}
          {/*<Text style={[styles.btnTitle, { color: '#4876FF', fontSize: 15 }]}>忘记密码？</Text>*/}
        {/*</TouchableOpacity>*/}


        {/*<TouchableOpacity style={{marginTop: 15,marginLeft: 30,marginRight: 30,height: 40,justifyContent: 'center', flexDirection: 'row',}}*/}
                          {/*onPress={() => Actions.tabbar({type: 'replace'})}>*/}
          {/*<Text style={[styles.btnTitle, { color: '#4876FF', fontSize: 15 }]}>直接进入主界面</Text>*/}
        {/*</TouchableOpacity>*/}
      </View>
    );
  }
}


const styles = StyleSheet.create({
    view: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: defaultStyles.WHITEOFBACKGROUND,
    },
    textInputView: {
      flexDirection: 'row',
      borderWidth: 0.28,
      borderRadius: 3,
      borderColor: defaultStyles.BORDERCOLOR,
      marginLeft: 30,
      marginRight: 30,
      marginTop: 2,
      backgroundColor: 'white',
    },
    icon: {
      flex: 1,
      width: 45,
      height: 45,
      marginLeft: 5,
      justifyContent: 'center',
      alignItems: 'center',
    },
    textInput: {
      flex: 6,
      marginLeft: 0,
      marginRight: 0,
      height: 45,
    },
    loginBtn: {
      marginTop: 20,
      marginLeft: 30,
      marginRight: 30,
      height: 40,
      backgroundColor: defaultStyles.LIGHTBLUE,
      justifyContent: 'center',
      borderRadius: 5,
    },
    btnTitle: {
      textAlign: 'center',
      color: 'white',
      fontSize: 17,
    },
    registerBtn: {
      marginTop: 10,
      marginLeft: 30,
      marginRight: 30,
      height: 40,
      justifyContent: 'center',
      flexDirection: 'row',
    },
    forgetBtn: {
      marginTop: 15,
      marginLeft: 30,
      marginRight: 30,
      height: 40,
      justifyContent: 'flex-end',
      flexDirection: 'row',
    },
})

const mapStateToProps = (state) => {
  return {
    isLoading: state.login.isLoading,
    isLoginSuccess: state.login.isLoginSuccess,
    merid: state.login.merid,
    errorMessage: state.login.errorMessage,
  };
}
export default connect(mapStateToProps)(LoginContainer);
